<template>
  <div class="lookProduction-container">
    <GdwyyAppBigTitle :time="queryParam.dayId" title="看产能" color="org" icon="zl/icon_kcn"></GdwyyAppBigTitle>
    <van-loading v-if="loading" type="spinner" color="#1989fa" />
    <div class="main" v-else>
      <div v-for="(item, index) in dataList" :key="index + 'kcn'" class="block-pd">
        <GdwyyAppSmallTitle :title="item.label"></GdwyyAppSmallTitle>
        <div class="item-card">
          <div class="card-des" v-for="(v, k, i) in desMap" :key="k + 'des'">
            <img class="icon" :src="require('../../../../assets/imgs/reconsitution/zl/' + `icon_${v}.png`)" />
            <span class="font-13 color333">{{ k }}</span>
            <div class="num font-24 color333">
              {{
                v === 'zb'
                  ? Math.round((data[`${item.target}${desModelMap[i]}`] || 0) * 10000) / 100 + '%'
                  : data[`${item.target}${desModelMap[i]}`] || 0
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { GdwyyAppSmallTitle, GdwyyAppBigTitle } from '@/components/reconsitution/index.js'
import { reconsitutionMixin } from '@/mixins/reconsitutionMixin.js'
const _apiConfig = [
  {
    url: '2c3a07178ba92724018c676cd2e80045',
    resultParamsName: 'data',
    loading: 'loading',
  },
]
export default {
  name: 'lookProduction',
  components: { GdwyyAppSmallTitle, GdwyyAppBigTitle },
  mixins: [reconsitutionMixin],
  data() {
    return {
      queryParam: {
        gridId: '',
        dayId: '',
      },
      loading: false,
      data: {
        BQ_M_CAPACITY: '',
        BQ_M_COO_CAPACITY: '',
        BQ_M_AREA_CAPACITY: '',
        BQ_M_SIM_GRID: '',
        BQ_M_RATE: '',
        BQ_M_SIM_AREA: '',

        VILL_M_CAPACITY: '',
        VILL_M_COO_CAPACITY: '',
        VILL_M_AREA_CAPACITY: '',
        VILL_M_SIM_GRID: '',
        VILL_M_RATE: '',
        VILL_M_SIM_AREA: '',

        STAFF_M_CAPACITY: '',
        STAFF_M_COO_CAPACITY: '',
        STAFF_M_AREA_CAPACITY: '',
        STAFF_M_SIM_GRID: '',
        STAFF_M_RATE: '',
        STAFF_M_SIM_AREA: '',
      },
      desMap: {
        月产能: 'ycn',
        承包区域产能: 'cbqycn',
        占比: 'zb',
        协同产能: 'xtcn',
        同营服: 'tyf',
        同区县: 'tqx',
      },
      desModelMap: ['_M_CAPACITY', '_M_AREA_CAPACITY', '_M_RATE', '_M_COO_CAPACITY', '_M_SIM_GRID', '_M_SIM_AREA'],
      dataList: [
        {
          label: '包区',
          target: 'BQ',
        },
        {
          label: '目标市场',
          target: 'VILL',
        },
        {
          label: '人员',
          target: 'STAFF',
        },
      ],
    }
  },

  created() {
    const that = this
    that.initData()

    function main(e) {
      // that.loading = true
      if (e.key === '$dialogFinish' && e.newValue) {
        localStorage.setItem('$dialogFinish', '')
        that.setAllRequest(_apiConfig, {
          ...that.queryParam,
          gridId: localStorage.getItem('$gridId'),
          monthId: that.queryParam.dayId,
        })
      }
    }
    // 此处的监听 似乎是只在app中生效,在本地开的前端服务是不生效的
    window.addEventListener('storage', main)
  },

  methods: {
    initDataPostHook(data) {
      const params = { ...this.queryParam, monthId: this.queryParam.dayId }
      delete params.dayId
      this.setAllRequest(_apiConfig, params)
    },
  },
}
</script>
  
  <style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.lookProduction-container {
  ::v-deep {
    .small-title::before {
      background: #ffab4d;
    }
  }
  .main {
    background-color: #fff;
    padding-bottom: 3.2vw;
  }

  .item-card {
    // .bg('zl/bg-card-发展.png');
    width: 90.4vw;
    height: 42.1333vw;
    // margin: 0 auto;
    background: #fcfbf9;
    display: grid;
    grid-template-columns: 1.2fr 1.5fr 1fr;
    padding: 0 4vw 4vw 4vw;
  }
  .card-des {
    margin-top: 4vw;
  }
  .icon {
    width: 3.7333vw;
    height: 3.7333vw;
    margin-right: 1.6vw;
  }
  .num {
    margin-left: 5.3333vw;
  }
}
</style>